<template>
  <div>
    <div class="mm"><p class="h3">设置密码</p></div>

    <div>
      <van-cell-group>
        <van-field v-model="form.fareName" placeholder="输入账户名" v-on:input="checkInput"/>
      </van-cell-group>

      <van-cell-group>
        <van-field v-model="form.farePassword" placeholder="输入密码" v-on:input="checkInput"/>
      </van-cell-group>

      <van-cell-group>
        <van-field v-model="form.value1" placeholder="确认密码" v-on:input="checkInpu"/>
      </van-cell-group>
      <p class="mima">密码长度8-32位,可以是数字也可以是大小写字母</p>
    </div>

    <div class="yanzheng">
      <van-button type="danger" block @click="queren">确认提交</van-button>
    </div>


  </div>
</template>

<script>


import {addUser} from "@/api/user/user";

export default {
  data() {
    return {
      form: {
        fareName: '',
        farePassword: '',
        value1: '',
      },
      farePhone: ''
    };
  },
  methods: {
    //判断不能输入汉字
    checkInpu() {
      const inputValue = this.form.value1;
      const chineseRegex = /[\u4e00-\u9fa5]/;
      if (chineseRegex.test(inputValue)) {
        // 如果输入内容包含汉字，给出提示并清空输入框
        this.form.value1 = '';
      }
    },
    //判断不能输入汉字
    checkInput() {
      const inputValue = this.form.farePassword;
      const chineseRegex = /[\u4e00-\u9fa5]/;
      if (chineseRegex.test(inputValue)) {
        // 如果输入内容包含汉字，给出提示并清空输入框
        this.$toast.fail('不能输入汉字');
        this.form.farePassword = '';
      }
    },

    queren() {
      //判断输入的账户密码能不能为空
      if (this.form.farePassword == ''||this.form.fareName == '') {
        return this.$toast.fail('密码或账户名不能为空');
      } else {
        console.log(this.form.farePassword, this.form.fareName)
        if (this.form.password!= this.value1){
          return  this.$toast.fail('两次密码不一致');
        }
        addUser(this.form).then(res => {
            //请求成功显示弹框
            this.$toast.success(res.message);
            //跳转页面
            this.$router.push({path: '/login'})
          //   //请求失败显示错误弹框
          //   this.$toast.fail(res.message);
          // }
        })
      }
    },
    deng() {
      this.$router.push({name: '/login'});
    },
    shezhimima() {
      this.$router.push({name: '/SetPassword'});
    },

  },
  created() {
    this.form.farePhone = this.$route.query.farePhone;
    console.log(this.farePhone)
  }
}

</script>


<style>
.mm {
  width: 100%;
  height: 40px;
  margin-top: -25px;
}

.h3 {
  margin-top: 28px;
  text-align: center;
}

.mima {
  font-size: 10px;
  color: darkgrey;
  text-align: center;
}

.yanzheng {
  margin-top: 10px;
}
</style>
